<template>
	<div class="dict-data-page">
		<!-- 搜索表单 -->
		<el-form :model="table.where" class="ele-form-search ele-table-tool-default" size="mini" @keyup.enter.native="$refs.table.reload()" @submit.native.prevent>
			<el-row :gutter="15">
				<el-col :md="6" :sm="12">
					<el-form-item><el-input v-model="table.where.pzmx1" placeholder="请输入明细值1" clearable size="mini" /></el-form-item>
				</el-col>
				<el-col :md="12" :sm="12">
					<div class="ele-form-actions">
						<el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search" class="ele-btn-icon" size="mini">查询</el-button>
						<el-button @click="add()" type="primary" icon="el-icon-plus" class="ele-btn-icon" size="mini">添加</el-button>
						<el-button @click="remove()" type="danger" icon="el-icon-delete" class="ele-btn-icon" size="mini">删除</el-button>
						<el-button @click="download()"  icon="el-icon-download" class="ele-btn-icon" size="mini">导出</el-button>
						<el-button @click="showImport=true"  icon="el-icon-upload" class="ele-btn-icon" size="mini">导入</el-button>
					</div>
				</el-col>
			</el-row>
		</el-form>
		<!-- 数据表格 -->
		<ele-data-table ref="table" :config="table" :choose.sync="choose" :height="tbHeight" highlight-current-row>
			<el-table-column type="selection" width="45" align="center" />
			<el-table-column prop="pzmx1" label="明细值1" sortable="custom" show-overflow-tooltip min-width="120" />
			<el-table-column prop="pzmx2" label="明细值2" sortable="custom" show-overflow-tooltip min-width="120" />
			<el-table-column prop="pzmx3" label="明细值3" sortable="custom" show-overflow-tooltip min-width="120" />
			<el-table-column prop="pzmx4" label="明细值4" sortable="custom" show-overflow-tooltip min-width="120" />
			<el-table-column prop="pzmx5" label="明细值5" sortable="custom" show-overflow-tooltip min-width="120" />
			<el-table-column prop="pzmx6" label="明细值6" sortable="custom" show-overflow-tooltip min-width="120" />
			<el-table-column prop="seq" label="排序号" sortable="custom" width="90px" />
			<el-table-column prop="remark" label="备注" sortable="custom" show-overflow-tooltip min-width="110" />
			<el-table-column label="创建时间" sortable="custom" show-overflow-tooltip min-width="110">
				<template slot-scope="{ row }">
					{{ row.createtime | toDateString }}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="130px" align="center" :resizable="false" fixed="right">
				<template slot-scope="{ row }">
					<el-link @click="edit(row)" icon="el-icon-edit" type="primary" :underline="false">修改</el-link>
					<el-popconfirm title="确定要删除此行数据吗？" @confirm="remove(row)" class="ele-action">
						<el-link slot="reference" icon="el-icon-delete" type="danger" :underline="false">删除</el-link>
					</el-popconfirm>
				</template>
			</el-table-column>
		</ele-data-table>
		<!-- 编辑弹窗 -->
		<el-dialog
			:title="editForm.id ? '修改明细' : '添加明细'"
			:visible.sync="showEdit"
			width="400px"
			@closed="editForm = {}"
			:destroy-on-close="true"
			:lock-scroll="false"
			:close-on-click-modal="false"
		>
			<el-form :model="editForm" ref="editForm" :rules="editRules" label-width="96px">
				<el-form-item label="配置ID:" prop="mid"><el-input v-model="editForm.mid" placeholder="" clearable :disabled="true"/></el-form-item>
				<el-form-item label="明细值1:" prop="pzmx1"><el-input v-model="editForm.pzmx1" placeholder="请输入明细值1" clearable /></el-form-item>
				<el-form-item label="明细值2:" prop="pzmx2"><el-input v-model="editForm.pzmx2" placeholder="请输入明细值2" clearable /></el-form-item>
				<el-form-item label="明细值3:" prop="pzmx3"><el-input v-model="editForm.pzmx3" placeholder="请输入明细值3" clearable /></el-form-item>
				<el-form-item label="明细值4:" prop="pzmx4"><el-input v-model="editForm.pzmx4" placeholder="请输入明细值4" clearable /></el-form-item>
				<el-form-item label="明细值5:" prop="pzmx5"><el-input v-model="editForm.pzmx5" placeholder="请输入明细值5" clearable /></el-form-item>
				<el-form-item label="明细值6:" prop="pzmx6"><el-input v-model="editForm.pzmx6" placeholder="请输入明细值6" clearable /></el-form-item>
				<el-form-item label="排序号:" prop="seq">
					<el-input-number v-model="editForm.seq" controls-position="right" :min="0" placeholder="请输入排序号" class="ele-fluid ele-text-left" />
				</el-form-item>
				<el-form-item label="备注:"><el-input v-model="editForm.remark" placeholder="请输入备注" :rows="4" type="textarea" /></el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="showEdit = false">取消</el-button>
				<el-button type="primary" @click="save">保存</el-button>
			</div>
		</el-dialog>
		<PzbhmxImport
		:visible.sync="showImport"
		@done="reload"
		:mid="this.mid"/>
	</div>
</template>

<script>
import PzbhmxImport from './pzbhmx-import'
export default {
	name: 'ScmPzbhData',
	components: { PzbhmxImport },
	props: {
		mid: Number, // 主表id
		tbHeight: String // 表格高度
	},
	data() {
		return {
			table: { url: '/scm/base/pzbhmx/page', where: { mid: this.mid }, page:{limit:50} }, // 表格配置
			choose: [], // 表格选中数据
			showEdit: false, // 是否显示表单弹窗
			showImport:false,
			editForm: {}, // 表单数据
			editRules: {
				// 表单验证规则
				pzmx1: [{ required: true, message: '请输入明细值1', trigger: 'blur' }],
				seq: [{ required: true, message: '请输入排序号', trigger: 'blur' }]
			}
		};
	},
	methods: {
		/* 显示新增 */
		add() {
			this.editForm.mid = this.mid;
			this.editForm.seq = 0; //默认排序号0
			this.showEdit = true;
		},
		/* 显示编辑 */
		edit(row) {
			this.editForm = Object.assign({}, row);
			this.showEdit = true;
		},
		/* 保存编辑 */
		save() {
			this.$refs['editForm'].validate(valid => {
				if (valid) {
					const loading = this.$loading({ lock: true });
					const posturl = this.editForm.id ? '/scm/base/pzbhmx/updatePzbhmx' : '/scm/base/pzbhmx/addPzbhmx';
					this.$http
						.post(posturl, this.editForm)
						.then(res => {
							loading.close();
							if (res.data.code === 0) {
								this.showEdit = false;
								this.$message({ type: 'success', message: res.data.msg });
								this.$refs.table.reload();
							} else {
								this.$message.error(res.data.msg);
							}
						})
						.catch(e => {
							loading.close();
							this.$message.error(e.message);
						});
				} else {
					return false;
				}
			});
		},
		/* 删除 */
		remove(row) {
			if (!row) {
				// 批量删除
				if (this.choose.length === 0) return this.$message.error('请至少选择一条数据');
				let ids = this.choose.map(d => d.id);
				this.$confirm('确定要删除选中行数据吗?', '提示', { type: 'warning' })
					.then(() => {
						const loading = this.$loading({ lock: true });
						this.$http
							.post('/scm/base/pzbhmx/deleteBatch', { ids: ids })
							.then(res => { 
								loading.close();
								if (res.data.code === 0) {
									this.$message({ type: 'success', message: res.data.msg });
									this.$refs.table.reload();
								} else {
									this.$message.error(res.data.msg);
								}
							})
							.catch(e => {
								loading.close();
								this.$message.error(e.message);
							});
					})
					.catch(() => 0);
			} else {
				// 单个删除
				const loading = this.$loading({ lock: true });
				this.$http
					.post('/scm/base/pzbhmx/deletePzbhmx?id=' + row.id)
					.then(res => {
						loading.close();
						if (res.data.code === 0) {
							this.$message({ type: 'success', message: res.data.msg });
							this.$refs.table.reload();
						} else {
							this.$message.error(res.data.msg);
						}
					})
					.catch(e => {
						loading.close();
						this.$message.error(e.message);
					});
			}
		},
		//导出
		async download(){
			await this.axios.request({
				url:'/scm/base/pzbhmx/download',
				params:{
					mid:this.mid
				},
				method:'post',
				responseType: 'blob',
				timeout: 3600000
			}).then(res=>{
				var blob = new Blob([res.data], {
					type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
				});
				var downloadElement = document.createElement('a');
				var href = window.URL.createObjectURL(blob); // 创建下载的链接
				var contentFilename = (decodeURI(res.headers['content-disposition'])).split(
					'filename=')[1]; //获取服务器传过来的文件名
				downloadElement.href = href;
				downloadElement.download = contentFilename || ('配置补货明细.xlsx' || '下载的文件');
				document.body.appendChild(downloadElement);
				downloadElement.click(); // 点击下载
				document.body.removeChild(downloadElement); // 下载完成移除元素
				window.URL.revokeObjectURL(href); // 释放掉blob对象
				
			})
		},
		reload(){
			this.$refs.table.reload({page:1})
		}
	},
	watch: {
		/* 监听主表id变化 */
		mid() {
			this.table.where = { mid: this.mid };
			this.$refs.table.reload();
		}
	}
};
</script>

<style scoped>
	.ele-form-actions{
		display: flex;
	}
	
</style>
